import React, { useEffect, useState } from 'react';
import { Card, Typography, Button, Spin, Result } from 'antd';
import { Link, useSearchParams } from 'react-router-dom';
import { verifyEmail } from '../api/auth';

const { Title, Text } = Typography;

const EmailVerification: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [verified, setVerified] = useState(false);
  const [error, setError] = useState('');
  const [searchParams] = useSearchParams();
  const code = searchParams.get('code') || '';

  useEffect(() => {
    if (!code) {
      setError('验证码缺失');
      setLoading(false);
      return;
    }

    const verify = async () => {
      try {
        const response = await verifyEmail(code);
        if (response.code === 200) {
          setVerified(true);
        } else {
          setError(response.message || '验证失败');
        }
      } catch (error) {
        setError('验证失败，请稍后重试');
      } finally {
        setLoading(false);
      }
    };

    verify();
  }, [code]);

  return (
    <div style={{ 
      minHeight: '100vh', 
      display: 'flex', 
      alignItems: 'center', 
      justifyContent: 'center',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
    }}>
      <Card style={{ width: 500, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}>
        {loading ? (
          <div style={{ textAlign: 'center', padding: '40px 0' }}>
            <Spin size="large" />
            <div style={{ marginTop: 16 }}>
              <Text>正在验证邮箱...</Text>
            </div>
          </div>
        ) : verified ? (
          <Result
            status="success"
            title="邮箱验证成功"
            subTitle="您的邮箱已成功验证，现在可以正常使用所有功能。"
            extra={[
              <Button type="primary" key="login">
                <Link to="/login">立即登录</Link>
              </Button>,
              <Button key="home">
                <Link to="/">返回首页</Link>
              </Button>,
            ]}
          />
        ) : (
          <Result
            status="error"
            title="邮箱验证失败"
            subTitle={error}
            extra={[
              <Button type="primary" key="register">
                <Link to="/register">重新注册</Link>
              </Button>,
              <Button key="home">
                <Link to="/">返回首页</Link>
              </Button>,
            ]}
          />
        )}
      </Card>
    </div>
  );
};

export default EmailVerification; 